<template>
    <div id="box">
        <div class="footer">
            <div class="fotr-box">
                <router-link to="/Master" active-class="choute">
                    <span class="iconfont icon-index"></span>
                    <span class="text tinct">首页</span>
                </router-link>
            </div>
            <div class="fotr-box">
                <router-link to="/Caidan" active-class="choute">
                    <span class="iconfont icon-kafei1"></span>
                    <span class="text tinct">菜单</span>
                </router-link>
            </div>
            <div class="fotr-box" >
                <router-link to="/Chaopin" active-class="choute">
                    <span class="iconfont icon-gouwu_2"></span>
                    <span class="text tinct">潮品</span>
                </router-link>
            </div>
            <div class="fotr-box">
                <router-link to="/Shopping" active-class="choute">
                    <span class="iconfont icon-gouwuche3"></span>
                    <van-badge :content="$root.parMsg" class="fotr-quan" />
                    <span class="text tinct">购物车</span>
                </router-link>
            </div>
            <div class="fotr-box">
                <router-link to="/my" active-class="choute">
                    <span class="iconfont icon-wode"></span>
                    <span class="text tinct">我的</span>
                </router-link>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'Footer'
}
</script>
<style scoped>
@import url("../assets/font-footer/iconfont.css");
    .footer{
        width: 3.6rem;
        height: 0.5rem;
        background-color: #fff;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .footer .fotr-box{
        width: 0.32rem;
        height: 0.36rem;
        position: relative;
    }
    .fotr-box .iconfont{
        width: 0.2rem;
        display: block;
        margin: 0 auto 0.04rem;
        font-size: 0.2rem;
        color: #6a6a6a;
        
    }
    .fotr-box .text{
        display: block;
        font-size: 0.1rem;
        color: #828282;
        text-align: center;
    }
    .choute .iconfont{
        color: #242287;
    }
    .choute .tinct{
         color: #242287;
    }
    .fotr-box .fotr-quan{
        position: absolute;
        top: -0.03rem;
        right: -0.03rem;
    }
</style>